<template>
  <div>
    <div v-show="showModal" @click.stop="closeSignDay" class="c-flex-row c-flex-center c-pf c-p-t0 c-p-l0 c-pz101 c-h c-w100 c-translucent-balck60">
      <div>
        <img src="" class="c-w80 c-br8 c-m-0auto" id="spreadImg" />
      </div>
    </div>
    <div class="canvasBox c-flex-row" v-if="signInfo&&signInfo.daySignType==2">
      <div class="anvasContent c-p" id="canvasDaySign">
        <img :src="$addXossFilter(signInfo.daySignContent.customizeImage)" alt class="c-w100 c-h img-pe-none">
        <div v-if="signInfo.daySignContent.customizeControl" class="customOne bgLocation">
          <div v-for="(item,index) in signInfo.daySignContent.customizeControl" :key="index">
            <div v-if="item.type==3" :style="item" class="c-pa">
              <div class="c-flex-column c-aligni-center">
                <img :src="$addXossFilter(signInfo.headimgurl, require('@/assets/defult_head.png'))" alt class="headerImg120 c-brp50 img-pe-none">
                <p>{{signInfo.nickname}}</p>
              </div>
            </div>
            <div v-if="item.type==2" :style="item" class="c-pa c-table">
              <span class="c-tableCell" :style="'vertical-align:'+item.verticalAlign">{{item.name}}</span>
            </div>
            <img v-if="item.type==1" class="c-pa" :src="$addXossFilter(signInfo.qrcodeUrl)" alt :style="item">
          </div>
        </div>
      </div>
    </div>
    <div class="canvasBox2 c-flex-row">
      <div class="anvasContent2 c-p" v-if="signInfo&&signInfo.dcStyleType==1" id="canvasType1">
        <img :src="$addXossFilter(signInfo.cardCover)" alt class="c-w100 c-h img-pe-none">
        <div class="customOne bgLocation">
          <div class="c-fs40 c-ph40 c-pt18">
            <div class="c-textAlign-r c-hh48 c-fw600" :style="'color:'+signInfo.fontColor">{{signInfo.daySignShowData.isShowSignDay==1?signInfo.monthTime+' . '+signInfo.dayTime:''}}</div>
            <div class="c-flex-row c-justify-end c-mt16">
              <div class="c-flex-row c-aligni-center c-textAlign-r c-fs20 c-br36 c-hh42 c-pb15 c-ph14 c-fw600" :style="signInfo.daySignShowData.isShowArea==1?'color:'+signInfo.fontColor+';border:2px solid '+ signInfo.fontColor:''">
                <div class="iconfont c-fs24 c-mr6" v-if="signInfo.daySignShowData.isShowArea==1" :style="'color:'+signInfo.fontColor">&#xe6e2;</div>
                {{signInfo.daySignShowData.isShowArea == 1? signInfo.city:'' }}
              </div>
            </div>
          </div>
          <div v-if="signInfo.enableDcWord" class="iconfont c-fs42 c-ph48 c-mb20" :style="'color:'+signInfo.fontColor">&#xe7ce;</div>
          <div class="c-ph48 c-fs28 c-lh48 c-fw600" :style="'color:'+signInfo.fontColor">
            <div v-if="signInfo.enableDcWord" class="" v-for="(item,index) in signInfo.word" :key="index">{{item.content }}</div>
          </div>
          <div class="c-pa c-p-b30 c-ph24 c-w100">
            <div class="c-ph24 c-pv16 c-translucent-balck50 c-br20">
              <div class="c-flex-row c-aligni-center c-fc-white">
                <div class="c-brp50 c-text-hidden c-ww64 c-hh64">
                  <img class="c-ww64 c-hh64" :src="signInfo.headimgurl" alt="">
                </div>
                <div class="c-ml20">
                  <div class="c-fs24 c-mb6 c-fw600">{{ signInfo.nickname }}</div>
                  <div class="c-fs20">{{ '来自 「'+ (companyAuth.companyName.length>8?companyAuth.companyName.substring(0, 8)+'...':companyAuth.companyName)+'」' }}</div>
                </div>
              </div>
              <div class="c-pt16 c-ph32 c-br20 c-bg-white c-mt18 c-pb16">
                <div class="c-bd-b1 c-flex-row c-aligni-center c-pb22"
                  :class="signInfo.daySignShowData.isShowSignData == 1&&signInfo.daySignShowData.isShowSignExecution==1?'c-justify-sb':'c-justify-center'"
                  v-if="signInfo.daySignShowData.isShowSignData == 1||signInfo.daySignShowData.isShowSignExecution==1">
                  <div v-if="signInfo.daySignShowData.isShowSignData == 1">
                    <div class="c-fs28 c-fc-xblack c-fw600" :class="signInfo.daySignShowData.isShowSignData == 1&&signInfo.daySignShowData.isShowSignExecution==1?'':'c-textAlign-c'">{{ signInfo.type == 1 ? (signInfo.timeType==2?signInfo.hasSignDay:signInfo.hasSignDay+'/'+signInfo.allDay): signInfo.hasWork}}</div>
                    <div class="c-fs20 c-fc-gray">{{signInfo.type == 1 ? '坚持打卡天数' : signInfo.type == 2 ? '完成作业个数' : '闯过关卡个数'}}</div>
                  </div>
                  <div v-if="signInfo.daySignShowData.isShowSignExecution">
                    <div class="c-fs28 c-fc-xblack c-fw600" :class="signInfo.daySignShowData.isShowSignData == 1&&signInfo.daySignShowData.isShowSignExecution==1?'':'c-textAlign-c'">{{ signInfo.overPercent}}</div>
                    <div class="c-fs20 c-fc-gray">超越成员比例</div>
                  </div>
                </div>
                <div class="c-flex-row c-aligni-center c-justify-sb c-mt16">
                  <div>
                    <div class="c-fs20 c-fc-xblack c-ww300">{{(signInfo.name.length>20?signInfo.name.substring(0, 20)+'...':signInfo.name)}}</div>
                    <div class="c-pb16 c-hh36 c-br16 c-fc-white c-bg-gray c-mt10 c-fs16 c-ww200 c-textAlign-c" style="text-rendering: optimizeLegibility;font-weight: normal;letter-spacing:2px;">长按扫码开始学习</div>
                  </div>
                  <div class="c-ml10"><img class="c-ww96 c-hh96" :src="signInfo.qrcodeUrl" alt=""></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="anvasContent2 c-p" v-if="signInfo&&signInfo.dcStyleType==2" id="canvasType2">
        <img :src="$addXossFilter(signInfo.cardCover)" alt class="c-w100 c-h img-pe-none">
        <div class="customOne bgLocation" :style="'color:'+signInfo.fontColor">
          <div class="c-ph48 c-fs28 c-lh48 c-fw600 c-pt60">
            <div v-if="signInfo.enableDcWord" class="" v-for="(item,index) in signInfo.word" :key="index">{{item.content }}</div>
          </div>
          <div v-if="signInfo.enableDcWord" class="c-ph48 c-pt22">
            <img src="../../../assets/i/wap/clockIn/startLine.png" alt="">
          </div>
          <div class="c-flex-row c-aligni-center c-ph48 c-pt32">
            <div class="c-bd3-white c-brp50 c-text-hidden c-ww64 c-hh64"><img class="c-ww64 c-hh64 c-brp50" :src="signInfo.headimgurl" alt=""></div>
            <div class="c-ml20 c-pb18">
              <div class="c-fs24 c-mb6 c-fw600">{{ signInfo.nickname }}</div>
              <div class="c-fs20">{{ '来自 「'+ (companyAuth.companyName.length>8?companyAuth.companyName.substring(0, 8)+'...':companyAuth.companyName)+'」' }}
              </div>
            </div>
          </div>
          <div class="c-pa c-p-b0 c-w100">
            <div class="c-fs40 c-pb60 c-ph48">
              <div class="c-textAlign-r c-hh48 c-fw600">{{signInfo.daySignShowData.isShowSignDay==1?signInfo.monthTime+'.'+signInfo.dayTime:''}}</div>
              <div class="c-flex-row c-justify-end c-mt12">
                <div class="c-flex-row c-aligni-center c-textAlign-r c-fs20 c-br20 c-hh42 c-pb16 c-ph14 c-fw600" :style="signInfo.daySignShowData.isShowArea==1?'border:2px solid '+ signInfo.fontColor:''">
                  <div class="iconfont c-fs20 c-mr6" v-if="signInfo.daySignShowData.isShowArea==1" :style="'color:'+signInfo.fontColor">&#xe6e2;</div>
                  {{signInfo.daySignShowData.isShowArea == 1? signInfo.city:'' }}
                </div>
              </div>
            </div>
            <div class="c-pv16 c-translucent-balck50 c-br-tr40 c-br-tl40">
              <div class="c-pt16 c-pb26 c-ph32 c-pb16">
                <div class="c-bd-b2 c-flex-row c-aligni-center c-justify-sb c-pb22" v-if="signInfo.daySignShowData.isShowSignExecution==1||signInfo.daySignShowData.isShowSignData == 1">
                  <div v-if="signInfo.daySignShowData.isShowSignData == 1" class="c-flex-row c-aligni-center">
                    <div class="c-fs20 c-fc-white">{{signInfo.type == 1 ? '坚持打卡天数' : signInfo.type == 2 ? '完成作业个数' : '闯过关卡个数'}}</div>
                    <div class="c-fs28 c-fc-white c-ml20">{{ signInfo.type == 1 ?(signInfo.timeType==2? signInfo.hasSignDay:signInfo.hasSignDay+'/'+signInfo.allDay): signInfo.hasWork}}</div>
                  </div>
                  <div v-if="signInfo.daySignShowData.isShowSignExecution==1" class="c-flex-row c-aligni-center">
                    <div class="c-fs20 c-fc-white">超越成员比例</div>
                    <div class="c-fs28 c-fc-white c-ml20">{{ signInfo.overPercent}}</div>
                  </div>
                </div>
                <div class="c-flex-row c-aligni-center c-justify-sb c-mt10">
                  <div>
                    <div class="c-fs20 c-fc-white c-ww440">{{(signInfo.name.length>20?signInfo.name.substring(0, 20)+'...':signInfo.name)}}</div>
                    <div class="c-pb16 c-hh36 c-br16 c-fc-xblack c-bg-white c-mt12 c-fs16 c-ww200 c-textAlign-c" style="text-rendering: optimizeLegibility;font-weight: normal;letter-spacing:2px;">长按扫码开始学习</div>
                  </div>
                  <div class="c-ml10"><img class="c-ww80 c-hh80" :src="signInfo.qrcodeUrl" alt=""></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="anvasContent2 c-p" v-if="signInfo&&signInfo.dcStyleType==3" id="canvasType3">
        <img :src="$addXossFilter(signInfo.cardCover)" alt class="c-w100 c-h img-pe-none">
        <div class="customOne bgLocation" :style="'color:'+signInfo.fontColor">
          <div class="c-fs40 c-pt50 c-ph48">
            <div class="c-textAlign-c c-hh48 c-fw600">{{signInfo.daySignShowData.isShowSignDay==1?signInfo.monthTime+'.'+signInfo.dayTime:''}}</div>
            <div class="c-flex-row c-justify-center c-mt12">
              <div class="c-flex-row c-aligni-center c-textAlign-c c-fs20 c-br20 c-pb16 c-ph14 c-fw600 c-hh42" :style="signInfo.daySignShowData.isShowArea == 1?'border:2px solid '+ signInfo.fontColor:''">
                <div class="iconfont c-fs20 c-mr6" v-if="signInfo.daySignShowData.isShowArea==1" :style="'color:'+signInfo.fontColor">&#xe6e2;</div>
                {{signInfo.daySignShowData.isShowArea == 1? signInfo.city:'' }}
              </div>
            </div>
          </div>
          <div class="c-ph48 c-fs28 c-lh48 c-fw600 c-pt30 c-textAlign-c">
            <div v-if="signInfo.enableDcWord" class="" v-for="(item,index) in signInfo.word" :key="index">{{item.content }}</div>
          </div>
          <div class="c-pa c-pb30 c-p-b0 c-w100 c-ph28">
            <div class=" c-bg-white c-br20 c-p">
              <div class="c-pa c-p-t-40 c-p-l0 c-p-r0 c-center c-bd3-white c-brp50 c-text-hidden c-ww84 c-hh84">
                <img class="c-ww88 c-hh88" :src="signInfo.headimgurl" alt="">
              </div>
              <div class="c-pt60">
                <div class="c-textAlign-c">
                  <div class="c-fs24 c-mb6 c-fw600 c-fc-xblack">{{ signInfo.nickname }}</div>
                  <div class="c-fs20 c-fc-xblack c-mt8">{{ '来自 「'+ (companyAuth.companyName.length>8?companyAuth.companyName.substring(0, 8)+'...':companyAuth.companyName)+'」' }}</div>
                </div>
                <div class="c-mt20 c-ph28" v-if="signInfo.daySignShowData.isShowSignData == 1||signInfo.daySignShowData.isShowSignExecution==1">
                  <div class="c-flex-row c-aligni-center c-pv16 c-ph32 c-bg-gray01 c-br10" :class="signInfo.daySignShowData.isShowSignData == 1&&signInfo.daySignShowData.isShowSignExecution==1?'c-justify-sb':'c-justify-center'">
                    <div v-if="signInfo.daySignShowData.isShowSignData == 1">
                      <div class="c-fs28 c-fc-xblack c-mb10" :class="signInfo.daySignShowData.isShowSignData == 1&&signInfo.daySignShowData.isShowSignExecution==1?'':'c-textAlign-c'">{{ signInfo.type == 1 ?(signInfo.timeType==2? signInfo.hasSignDay:signInfo.hasSignDay+'/'+signInfo.allDay): signInfo.hasWork}}</div>
                      <div class="c-fs20 c-fc-gray">{{signInfo.type == 1 ? '坚持打卡天数' : signInfo.type == 2 ? '完成作业个数' : '闯过关卡个数'}}</div>
                    </div>
                    <div v-if="signInfo.daySignShowData.isShowSignExecution">
                      <div class="c-fs28 c-fc-xblack c-mb10" :class="signInfo.daySignShowData.isShowSignData == 1&&signInfo.daySignShowData.isShowSignExecution==1?'':'c-textAlign-c'">{{ signInfo.overPercent}}</div>
                      <div class="c-fs20 c-fc-gray">超越成员比例</div>
                    </div>
                  </div>
                </div>
                <div class="c-flex-row c-aligni-center c-justify-sb c-mt16 c-ph28 c-pb16">
                  <div>
                    <div class="c-fs20 c-fc-xblack c-ww440 c-mb12">{{(signInfo.name.length>18?signInfo.name.substring(0, 18)+'...':signInfo.name)}}</div>
                    <div class="c-br16 c-fc-white c-bg-gray c-fs16 c-ww200 c-textAlign-c c-pb16 c-hh36 c-textAlign-c" style="text-rendering: optimizeLegibility;font-weight: normal;letter-spacing:2px;">长按扫码开始学习</div>
                  </div>
                  <div class="c-ml10"><img class="c-ww80 c-hh80" :src="signInfo.qrcodeUrl" alt=""></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
const CANVAS_WIDTH = 640;
const CANVAS_HEIGHT = 1136;
const CUR_TIMETAMP = new Date().getTime();
let html2canvas = null;
export default {
  name: "DaySign",
  props: {
    showSignDay: {
      type: Boolean,
      default: false
    },
    signDayInfo: {
      type: Object,
      default: {}
    }
  },
  beforeCreate() { },
  data() {
    return {
      showModal: false,
      signInfo: null,
      companyAuth: JSON.parse(localStorage.getItem("companyAuth")),
    };
  },
  mounted() {
  },
  computed: {},
  watch: {
    showSignDay(val) {
      this.showModal = val;
    },
  },
  methods: {
    signDayInfoStart(signDayInfo) {
      import(/* webpackChunkName: "html2canvas" */"@/utils/html2canvas-1.4.1.js").then(res => {
        html2canvas = res.default;
        console.log(signDayInfo)
        this.signInfo = signDayInfo;
        let $this = this
        console.log('riqian', this.signInfo)
        if ($this.signInfo && $this.signInfo.daySignType == 2) {
          if ($this.signInfo.daySignContent) {
            for (let i = 0; i < $this.signInfo.daySignContent.customizeControl.length; i++) {
              $this.signInfo.daySignContent.customizeControl[i].height = $this.signInfo.daySignContent.customizeControl[i].height * 2 + 'px'
              $this.signInfo.daySignContent.customizeControl[i].width = $this.signInfo.daySignContent.customizeControl[i].width * 2 + 'px'
              $this.signInfo.daySignContent.customizeControl[i].lineHeight = $this.signInfo.daySignContent.customizeControl[i].lineHeight * 2 + 'px'
              $this.signInfo.daySignContent.customizeControl[i].left = $this.signInfo.daySignContent.customizeControl[i].posX * 2 + 'px'
              $this.signInfo.daySignContent.customizeControl[i].top = $this.signInfo.daySignContent.customizeControl[i].posY * 2 + 'px'
              $this.signInfo.daySignContent.customizeControl[i].fontSize = $this.signInfo.daySignContent.customizeControl[i].size * 2 + 'px'
              $this.signInfo.daySignContent.customizeControl[i].letterSpacing = $this.signInfo.daySignContent.customizeControl[i].letterSpacing * 2 + 'px'
            }
            document.ontouchstart = null;
            document.ontuchmove = null;
            document.ontouchend = null;
            $this.$nextTick(() => {
              $this.canvas();
            });
          }
        } else if (this.signInfo.dcStyleType == 4) {
          this.startCanvas();
        } else {
          document.ontouchstart = null;
          document.ontuchmove = null;
          document.ontouchend = null;
          $this.$nextTick(() => {
              $this.canvas();
            });
        }
      })
    },
    canvas() {
      let domTest = this.signInfo.daySignType == 2 ? document.getElementById("canvasDaySign") : this.signInfo.dcStyleType == 1 ? document.getElementById("canvasType1") :
      this.signInfo.dcStyleType == 2 ? document.getElementById("canvasType2") :
      this.signInfo.dcStyleType == 3 ? document.getElementById("canvasType3") : document.getElementById("canvasDaySign");
      if (!domTest) {
        return;
      }
      html2canvas(domTest, {
        useCORS: true,
        height: domTest.offsetHeight - 1, // 解决当前页面生成图片出现白边问题
        width: domTest.offsetWidth - 1,
      }).then(canvas => {// eslint-disable-line
        // document.body.appendChild(canvas);
        let ctx = canvas.getContext("2d");
        this.canvasToImage(ctx);
      });
    },
    startCanvas() {
      let that = this;
      let canvas = document.createElement("canvas");
      canvas.width = CANVAS_WIDTH;
      canvas.height = CANVAS_HEIGHT;
      let ctx = canvas.getContext("2d");
      //开始绘制图片
      that.downImg(that.signInfo.cardCover)
        .then(signBgImg => {
          //绘制背景图片
          ctx.save();
          ctx.drawImage(signBgImg, 0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
          signBgImg = null;
          ctx.restore();

          //绘制日期地点 6月1日，厦门集美
          if (that.signInfo.daySignShowData.isShowArea == 1 || that.signInfo.daySignShowData.isShowSignDay == 1) {
            let textStr = ''
            if (that.signInfo.daySignShowData.isShowSignDay == 1 && that.signInfo.daySignShowData.isShowArea == 0) {
              textStr = that.signInfo.dateStr
            } else if (that.signInfo.daySignShowData.isShowSignDay == 0 && that.signInfo.daySignShowData.isShowArea == 1) {
              textStr = that.signInfo.city
            } else {
              textStr = that.signInfo.dateStr + ',' + that.signInfo.city
            }
            let dateText = {
              fontSize: 24,
              fontColor: that.signInfo.fontColor,
              textAlign: "left",
              textBaseline: 'top',
              textStr: textStr,
              offsetX: 75,
              offsetY: 80
            };
            that.drawText(ctx, dateText);
          }


          //绘制心情语
          let wordArr = [];
          // if (that.signInfo.isDefaultWord == 1) {
          //   let defaultWord = that.signInfo.word[0].content;
          //   let firstLine = defaultWord.substring(0, 16);
          //   let secendLine = defaultWord.substring(16, 32);
          //   let thirdLine = defaultWord.substring(32, 48);
          //   firstLine && wordArr.push({
          //     content: firstLine
          //   });
          //   secendLine && wordArr.push({
          //     content: secendLine
          //   });
          //   thirdLine && wordArr.push({
          //     content: thirdLine
          //   });
          // } else {
            wordArr = this.signInfo.enableDcWord ? that.signInfo.word : [];
          // }
          let wordArrLength = wordArr.length;
          for (let i = 0; i < wordArrLength; i++) {
            let pingyuText = null;
            //最后一行右对齐
            // if (i != 0 && i == wordArrLength - 1) {
            //   pingyuText = {
            //     fontSize: 24,
            //     fontColor: "#ffffff",
            //     textAlign: "right",
            //     textBaseline: 'top',
            //     textStr: wordArr[i].content,
            //     offsetX: 572,
            //     offsetY: 134 + i * 60
            //   };
            // } else {
            pingyuText = {
              fontSize: 32,
              fontColor: that.signInfo.fontColor,
              textAlign: "center",
              textBaseline: 'top',
              textStr: wordArr[i].content,
              offsetX: CANVAS_WIDTH / 2,
              offsetY: 134 + i * 60
            };
            // }
            that.drawText(ctx, pingyuText);
          }
          //绘制中间圆角白色矩形块
          let radio = 10;
          ctx.beginPath();
          // let topPox = 600
          // if (that.signInfo.daySignShowData.isShowSignExecution == 1 || that.signInfo.daySignShowData.isShowSignData == 1) {
          //   topPox = 800
          // }
          ctx.moveTo(40 + radio, 628);
          ctx.lineTo(600 - radio, 628);
          ctx.arcTo(600, 628, 600, 628 + radio, radio);
          ctx.lineTo(600, 773);
          if (that.signInfo.daySignShowData.isShowSignExecution == 1 || that.signInfo.daySignShowData.isShowSignData == 1) {
            ctx.arc(600, 778, 5, 1.5 * Math.PI, 0.5 * Math.PI, true);
            ctx.lineTo(600, 928 - radio);
            ctx.arcTo(600, 928, 600 - radio, 928, radio);
            ctx.lineTo(40 + radio, 928);
            ctx.arcTo(40, 928, 40, 928 - radio, radio);
            ctx.lineTo(40, 783);
            ctx.arc(40, 778, 5, 0.5 * Math.PI, 1.5 * Math.PI, true);
          } else {
            ctx.lineTo(600, 773 - radio);
            ctx.arcTo(600, 773, 600 - radio, 773, radio);
            ctx.lineTo(40 + radio, 773);
            ctx.arcTo(40, 773, 40, 773 - radio, radio);
            ctx.lineTo(40, 778);
          }
          ctx.arcTo(40, 628, 40 + radio, 628, radio);
          ctx.closePath();

          ctx.fillStyle = "#ffffff";
          ctx.fill();
          if (that.signInfo.daySignShowData.isShowSignExecution == 1 || that.signInfo.daySignShowData.isShowSignData == 1) {
            ctx.setLineDash([6, 12]);
            ctx.beginPath();
            ctx.moveTo(60, 778);
            ctx.lineTo(576, 778);
            ctx.strokeStyle = "#cccccc";
            ctx.stroke();
          }
          return that.downImg(that.signInfo.headimgurl);
        })
        .then(avatarImg => {
          //绘制圆形头像
          ctx.save();
          ctx.beginPath();
          ctx.arc(113, 700, 48, 0, 2 * Math.PI);
          ctx.clip();
          ctx.fillStyle = "#ffffff";
          ctx.fill();
          ctx.restore();
          ctx.save();
          ctx.beginPath();
          ctx.arc(113, 700, 48, 0, 2 * Math.PI);
          ctx.clip();
          ctx.drawImage(avatarImg, 65, 652, 96, 96);
          ctx.restore();
          avatarImg = null;
          //绘制作业标题 如果标题超过8个字，则分为2行显示，和头像居中对齐
          let nicknameOffsetY = 669;
          // if (that.signInfo.name.length > 8) {
          //   nicknameOffsetY = 650;
          //   let titleText1 = `在 「${that.signInfo.name.substring(0, 18)}`;
          //   let nameText1 = {
          //     fontSize: 24,
          //     fontColor: "#333333",
          //     textAlign: "left",
          //     textBaseline: 'top',
          //     textStr: titleText1,
          //     offsetX: 182,
          //     offsetY: 695
          //   };
          //   that.drawText(ctx, nameText1, 390);
          //   let titleText2 = that.signInfo.name.length > 22 ? `${that.signInfo.name.substring(18, 22)}...` : that.signInfo.name.substring(18, 22);
          //   let nameText2 = {
          //     fontSize: 24,
          //     fontColor: "#333333",
          //     textAlign: "left",
          //     textBaseline: 'top',
          //     textStr: `${titleText2}」 完成打卡`,
          //     offsetX: 182,
          //     offsetY: 730
          //   };
          //   that.drawText(ctx, nameText2, 390);
          // } else {
            let titleText = `来自 「${this.companyAuth.companyName.length > 8 ? that.companyAuth.companyName.substring(0, 8) + '...' : that.companyAuth.companyName}」`;
            let nameText = {
              fontSize: 24,
              fontColor: "#333333",
              textAlign: "left",
              textBaseline: 'top',
              textStr: titleText,
              offsetX: 182,
              offsetY: 715
            };
            that.drawText(ctx, nameText, 380);
          // }
          //绘制昵称
          let nikeNameText = {
            fontSize: 28,
            fontColor: "#333333",
            textAlign: "left",
            textBaseline: 'top',
            textStr: that.signInfo.nickname,
            offsetX: 182,
            offsetY: nicknameOffsetY
          };
          that.drawText(ctx, nikeNameText, 380);

          if (that.signInfo.daySignShowData.isShowSignData == 1) {
            //绘制打卡天数|完成作业个数|闯关个数
            let hasSignText = that.signInfo.type == 1 ? '坚持打卡天数' : that.signInfo.type == 2 ? '完成作业个数' : '闯过关卡个数';
            let signDrawText = {
              fontSize: 22,
              fontColor: "#999999",
              textAlign: "center",
              textBaseline: 'top',
              textStr: hasSignText,
              offsetX: that.signInfo.daySignShowData.isShowSignExecution == 1 ? 192 : 310,
              offsetY: 817
            };
            that.drawText(ctx, signDrawText);
            //日历打卡特殊处理
            if (that.signInfo.type == 1) {
              let textOffsetX = 167
              if (that.signInfo.daySignShowData.isShowSignExecution == 0) {
                  textOffsetX = 280
              }
              let hasSignDay = {
                fontSize: 36,
                fontColor: "#333333",
                textAlign: "left",
                textBaseline: 'top',
                textStr: that.signInfo.hasSignDay,
                offsetX: textOffsetX,
                offsetY: 865
              };
              that.drawText(ctx, hasSignDay);
              if (that.signInfo.timeType != 2) {
                let signAllDayOffsetX = (that.signInfo.hasSignDay + '').length;
                let signAllDay = {
                  fontSize: 24,
                  fontColor: "#999999",
                  textAlign: "left",
                  textBaseline: 'top',
                  textStr: `/ ${that.signInfo.allDay}`,
                  offsetX: textOffsetX + signAllDayOffsetX * 30,
                  offsetY: 875
                };
                that.drawText(ctx, signAllDay);
              }
            } else {
              let hasSignDay = {
                fontSize: 36,
                fontColor: "#333333",
                textAlign: "center",
                textBaseline: 'top',
                textStr: that.signInfo.hasWork,
                offsetX: that.signInfo.daySignShowData.isShowSignExecution == 1 ? 192 : 310,
                offsetY: 865
              };
              that.drawText(ctx, hasSignDay);
            }
          }
          if (that.signInfo.daySignShowData.isShowSignExecution == 1) {
            //超越成员比例
            let overPercentText = {
              fontSize: 22,
              fontColor: "#999999",
              textAlign: "center",
              textBaseline: 'top',
              textStr: '超越成员比例',
              offsetX: that.signInfo.daySignShowData.isShowSignData == 1 ? 454 : 310,
              offsetY: 817
            };
            that.drawText(ctx, overPercentText);

            let overPercent = {
              fontSize: 36,
              fontColor: "#333333",
              textAlign: "center",
              textBaseline: 'top',
              textStr: that.signInfo.overPercent,
              offsetX: that.signInfo.daySignShowData.isShowSignData == 1 ? 454 : 310,
              offsetY: 865
            };
            that.drawText(ctx, overPercent);
          }
          //绘制底部正方形
            ctx.fillStyle = "#fff";
            let rectInfo = {
              width: 562,
              height: 159,
              offsetX: 40,
              offsetY: that.signInfo.daySignShowData.isShowSignExecution == 1 || that.signInfo.daySignShowData.isShowSignData == 1 ? 948 : 798,
              r: 10
            }
            that.drowRoundRect(ctx, rectInfo);
            ctx.fill();
          return that.downImg(that.signInfo.qrcodeUrl);
        }).then(qrCodeImg => {
          //绘制二维码
          if (that.signInfo.daySignShowData.isShowSignExecution == 1 || that.signInfo.daySignShowData.isShowSignData == 1) {
            ctx.drawImage(qrCodeImg, 60, 966, 124, 124);
          } else {
            ctx.drawImage(qrCodeImg, 60, 816, 124, 124);
          }
          qrCodeImg = null;
          //绘制作业标题
          let longClickOffsetY = 1045;
          if (that.signInfo.daySignShowData.isShowSignExecution == 1 || that.signInfo.daySignShowData.isShowSignData == 1) {
            longClickOffsetY = 1045;
          } else {
            longClickOffsetY = 895;
          }
          let companyName = that.signInfo.name
          if (companyName.length > 13) {
            if (that.signInfo.daySignShowData.isShowSignExecution == 1 || that.signInfo.daySignShowData.isShowSignData == 1) {
              longClickOffsetY = 1066;
            } else {
              longClickOffsetY = 916;
            }
            let workName1 = {
              fontSize: 28,
              fontColor: "#333333",
              textAlign: "left",
              textBaseline: 'top',
              textStr: companyName.substring(0, 13),
              offsetX: 210,
              offsetY: that.signInfo.daySignShowData.isShowSignExecution == 1 || that.signInfo.daySignShowData.isShowSignData == 1 ? 968 : 818
            };
            that.drawText(ctx, workName1, 380);
            let workNameText2 = companyName.length > 23 ? `${companyName.substring(13, 23)}...` : companyName.substring(13, 23);
            let workName2 = {
              fontSize: 28,
              fontColor: "#333333",
              textAlign: "left",
              textBaseline: 'top',
              textStr: workNameText2,
              offsetX: 210,
              offsetY: that.signInfo.daySignShowData.isShowSignExecution == 1 || that.signInfo.daySignShowData.isShowSignData == 1 ? 1008 : 858
            };
            that.drawText(ctx, workName2, 380);
          } else {
            let workName = {
              fontSize: 28,
              fontColor: "#333333",
              textAlign: "left",
              textBaseline: 'top',
              textStr: companyName,
              offsetX: 210,
              offsetY: that.signInfo.daySignShowData.isShowSignExecution == 1 || that.signInfo.daySignShowData.isShowSignData == 1 ? 988 : 838
            };
            that.drawText(ctx, workName, 380);
          }
          //绘制长按识别二维码
          let longClickText = {
            fontSize: 22,
            fontColor: "#cccccc",
            textAlign: "left",
            textBaseline: 'top',
            textStr: "长按扫码开始学习",
            offsetX: 210,
            offsetY: longClickOffsetY
          };
          that.drawText(ctx, longClickText);
          that.canvasToImage(ctx);
        }).catch(function (error) {
          console.log(error);
          // 处理前面三个Promise产生的错误
        });
    },

    closeSignDay() {
      this.$emit("closeSignDay");
    },
    //下载图片
    downImg(imgUrl) {
      return new Promise(function (resolve, reject) {
        let img = new Image();
        if (!imgUrl.includes('base64')) {
          img.crossOrigin = "anonymous";
          imgUrl = imgUrl.includes('?') ? `${imgUrl}&t=${CUR_TIMETAMP}` : `${imgUrl}?t=${CUR_TIMETAMP}`;
        }
        img.src = imgUrl;
        img.onload = function () {
          resolve(img);
        };
        img.onerror = function (e) {
          console.log("下载图片失败");
          console.log(imgUrl);
          reject(e);
        };
      });
    },

    //绘制文字
    drawText(ctx, fontInfo, fWidth = 500) {
      ctx.save();
      ctx.font = fontInfo.fontSize + "px Helvetica Neue,Helvetica,Roboto,Arial,sans";
      ctx.fillStyle = fontInfo.fontColor;
      ctx.textBaseline = fontInfo.textBaseline || 'middle';
      ctx.textAlign = fontInfo.textAlign;
      ctx.fillText(
        fontInfo.textStr,
        fontInfo.offsetX,
        fontInfo.offsetY,
        fWidth
      );
      ctx.restore();
    },
    //绘制圆角矩形
    drowRoundRect(ctx, rectIbfo) {
      let width = rectIbfo.width;
      let height = rectIbfo.height;
      let offsetX = rectIbfo.offsetX;
      let offsetY = rectIbfo.offsetY;
      let r = rectIbfo.r;
      if (width < 2 * r) { r = width / 2; }
      if (height < 2 * r) { r = height / 2; }
      ctx.beginPath();
      ctx.moveTo(offsetX + r, offsetY);
      ctx.arcTo(offsetX + width, offsetY, offsetX + width, offsetY + height, r);
      ctx.arcTo(offsetX + width, offsetY + height, offsetX, offsetY + height, r);
      ctx.arcTo(offsetX, offsetY + height, offsetX, offsetY, r);
      ctx.arcTo(offsetX, offsetY, offsetX + width, offsetY, r);
      ctx.closePath();
    },

    //获取文字宽度
    getTextWidth(ctx, fontInfo) {
      ctx.save();
      ctx.font = fontInfo.fontSize + "px Helvetica Neue,Helvetica,Roboto,Arial,sans";
      ctx.fillStyle = fontInfo.fontColor;
      ctx.textBaseline = fontInfo.textBaseline || 'middle';
      ctx.textAlign = fontInfo.textAlign;
      let width = ctx.measureText(fontInfo.textStr).width;
      ctx.restore();
      return width;
    },

    //将canvas转成图片
    canvasToImage(ctx) {
      try {
        var dataURL = ctx.canvas.toDataURL("image/jpg");
        let ig = document.getElementById("spreadImg");
        ig.setAttribute("src", dataURL);
        // ig.src = dataURL;
        this.$emit("canvasOver");
      } catch (err) {
        console.log("canvas转成图片失败");
        console.log(err);
      }
    }
  },
  activated() { },
  deactivated() { }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component 640;
const CANVAS_HEIGHT = 1136;only -->
<style scoped>
.canvasBox {
  width: 640px;
  height: 1136px;
  top: -999999999px;
  left: -30000000px;
  z-index: -999;
  position: absolute;
}
.anvasContent {
  width: 640px;
  height: 1136px;
  position: relative;
}
.canvasBox2 {
  width: 16rem;
  height: 28.4rem;
  top: -999999999px;
  left: -30000000px;
  z-index: -999;
  position: absolute;
}
.anvasContent2 {
  width: 16rem;
  height: 28.4rem;
  position: relative;
}
.bgLocation {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.c-p-t-40{
  top:-1rem
}
.c-bg-gray01{
  background: rgba(153,153,153,0.1);
}
.c-bd3-white{border:3px solid #fff;}
</style>
